<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="action"
      :accept="accept"
      :limit="limit"
      :disabled="disabled"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList">
      <el-button
        size="small"
        :disabled="disabled"
        type="primary">
        上传视频
      </el-button>
      <div slot="tip" class="el-upload__tip">只能上传mp4/ogg/flv/avi/wmv/rmvb文件，且不超过20M</div>
    </el-upload>
    <el-dialog :visible.sync="visible" width="500px" title="视频预览">
      <video
        :src="src"
        class="video-avatar"
        controls="controls">
        您的浏览器不支持视频播放
      </video>
    </el-dialog>
  </div>
</template>

<script>
  const Address = require('../utils/url');
  export default {
    name: "UploadVideo",
    props: {
      limit: {//最大允许上传个数
        type: Number,
        default: 3,//默认值
        required: false
      },
      disabled: {//是否禁用
        type: Boolean,
        default: false,//默认值
        required: false
      },
      action: {//上传的地址
        type: String,
        default: Address.UPLOAD_IMG,//默认值
        required: false
      },
      list: {//回显的视频
        type: Array,
        default: () => [],//默认值
        required: false
      }
    },
    data() {
      return {
        fileList: [],
        src: "",
        accept: "video/mp4,video/ogg,video/flv,video/avi,video/wmv,video/rmvb",//限制格式
        visible: false,
      }
    },
    methods: {
      handlePreview(file) {
        /* http://image.sportfox.cn/13104202005121738295429test.mp4 */
        this.src = file.response ? file.response.data.src : file.url;
        this.visible = true;
      },
      //上传前回调
      beforeUploadVideo(file) {
        const isLt20M = file.size / 1024 / 1024 < 20;
        if (this.accept.split(',').indexOf(file.type) === -1) {
          this.$notify.info({
            title: '警告',
            message: "请上传正确的视频格式",
            type: 'warning'
          });
          return false;
        }
        if (!isLt20M) {
          this.$notify.info({
            title: '警告',
            message: "上传视频大小不能超过20MB!",
            type: 'warning'
          });
          return false;
        }
      },
      //移除事件
      handleRemove(file, fileList) {
        this.$emit('getVideo', fileList.map(v => v.response.data.src));
      },
      //上传成功回调
      handleVideoSuccess(res, file, fileList) {
        if (res.code === 0) {
          this.fileList = fileList;
          this.$emit('getVideo', fileList.map(v => v.url || v.response.data.src));
        }
        else {
          this.$notify.error({
            title: '上传失败',
            message: res.msg,
            type: 'warning'
          });
        }
      },
      //回显
      view() {
        const list = [];
        this.list.forEach((item, index) => {
          list.push({
            name: new Date().getTime() + index,
            url: item
          });
        });
        this.fileList = list;
      },
    },
    watch: {
      list: {
        handler(val) {
          if (val) this.view();
        },
        immediate: true
      }
    }
  }
</script>

<style scoped>
  .video-avatar {
    width: 460px;
  }
</style>
